import { StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import AreaLine from '../charts/AreaLine'
import BoxCard from '../components/BoxCard'
import TitleBox from '../components/TitleBox'
import { ScrollView } from 'react-native-gesture-handler'


const About = () => {
    const [CPUrate, setCPUrate] = useState(
        [{
            name: 'Linux CentOS 靶向机 8K67TRsj',
            data: generateDayWiseTimeSeries(new Date().getTime(), 20, {
                min: 10,
                max: 60
            }).series,
            itemStyle: {
                color: '#008ffb'
            },
        },
        {
            name: 'Linux CentOS 操作机 8K67875j',
            data: generateDayWiseTimeSeries(new Date().getTime(), 20, {
                min: 10,
                max: 20
            }).series,
            itemStyle: {
                color: '#00e396'
            },
        }]
    )
    const [Memoryrate, setMemoryrate] = useState(
        [{
            name: 'Linux CentOS 靶向机 8K67TRsj',
            data: generateDayWiseTimeSeries(new Date().getTime(), 20, {
                min: 40,
                max: 80
            }).series,
            itemStyle: {
                color: '#008ffb'
            },
        },
        {
            name: 'Linux CentOS 操作机 8K67875j',
            data: generateDayWiseTimeSeries(new Date().getTime(), 20, {
                min: 10,
                max: 80
            }).series,
            itemStyle: {
                color: '#00e396'
            },
        }]
    )

    function timestampToDateString(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '/';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
        var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

        let strDate = Y + M + D;
        return strDate;
    }
    function generateDayWiseTimeSeries(baseval, count, yrange) {
        var i = 0;
        var seriesList = [];
        var timeList = []
        while (i < count) {
            var x = baseval;
            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

            timeList.push(timestampToDateString(x))
            seriesList.push(y)
            baseval -= 86400000;
            i++;
        }
        return { timeList: timeList, series: seriesList };
    }

    return (
        <>
            <ScrollView
                style={{ flex: 1 }}
            >
                {CPUrate ? (
                    <BoxCard>
                        <TitleBox title="CPU使用率" label="CPU利用率是通过服务器内部监控组件采集上报，数据更加精准"></TitleBox>
                        <AreaLine
                            labels={generateDayWiseTimeSeries(new Date().getTime(), 20, {
                                min: 10,
                                max: 60
                            }).timeList}
                            series={CPUrate}
                        ></AreaLine>
                    </BoxCard>
                ) : (
                    <></>
                )}
                {Memoryrate ? (
                    <BoxCard>
                        <TitleBox title="内存使用率" label="内存利用率是通过服务器内部监控组件采集上报，数据更加精准"></TitleBox>
                        <AreaLine
                            labels={generateDayWiseTimeSeries(new Date().getTime(), 20, {
                                min: 10,
                                max: 60
                            }).timeList}
                            series={Memoryrate}
                        ></AreaLine>
                    </BoxCard>
                ) : (
                    <></>
                )}
            </ScrollView>
        </>
    )
}

export default About

const styles = StyleSheet.create({})